<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <abbr title="turnip">萝卜</abbr>
    <abbr title="turnips">苹果</abbr>
    <abbr title="turnip1">萝卜1</abbr>
    <abbr title="turnips1">苹果1</abbr>

    <script>
        (function displayAbbreviations() {
            //判断方法是否可以使用
            if (!document.getElementsByTagName ||
                !document.createElement ||
                !document.createTextNode
            ) {
                return false;
            };
            //取得所有的缩略词
            let abbreviations = document.getElementsByTagName('abbr');
            if (abbreviations.length < 1) {
                return false;
            }
            //创建数组，存放列表title信息
            let defs = new Array();
            //遍历缩略词
            for (let i = 0; i < abbreviations.length; i++) {
                let current_abbr = abbreviations[i];
                //如果缩略词标签内无元素
                if (current_abbr.childNodes.length < 1) continue;
                let definition = current_abbr.getAttribute('title');
                let key = current_abbr.lastChild.nodeValue;
                defs[key] = definition;
            }
            console.log(defs) //此时非正常的索引，实质是数组的属性，下面是在访问数组的属性
                //创建定义列表
            let dlist = document.createElement('dl');
            //遍历title数组
            for (key in defs) {
                let definition = defs[key];
                //创建定义标题
                let dtitle = document.createElement('dt');
                let dtitle_text = document.createTextNode(key);
                dtitle.appendChild(dtitle_text);
                //创建定义描述
                let ddesc = document.createElement('dd');
                let ddesc_text = document.createTextNode(definition);
                ddesc.appendChild(ddesc_text);
                //添加到定义列表
                dlist.appendChild(dtitle);
                dlist.appendChild(ddesc);
                //如果其无子元素
                if (dlist.childNodes.length < 1) return false;
                // 创建标题
                let header = document.createElement('h2');
                let header_text = document.createTextNode('Abbreviations');
                header.appendChild(header_text);
                //把标题添加到页面的主体
                document.body.appendChild(header);
                //把定义列表添加到页面主题内容
                document.body.appendChild(dlist);
            }
        })();
    </script>
</body>

</html>